<template>
	<view class="miou-home-box"  v-show="indexPage=='home'">
		
		<!--搜索框-->
		<bar-search ></bar-search>

		<!--轮播图-->
		<view class="miou-swiper-box" v-if="swiperList.length">
			<swiper
				class="screen-swiper square-dot c"
				autoplay
				indicator-dots
			>
				<swiper-item
					v-for="(item, index) in swiperList"
					:key="index"
					@click.stop="onGoToBanner(item)"
				>
					<image class="swiper-img" :src="item.imageurl"
					/>
				</swiper-item>
			</swiper>
		</view>
		
		<!-- 我的活动 -->
		<view-game :game="mineGameList"></view-game>
		
		
		<!-- 店家联盟 -->
		<view class="alliance" v-if="alliance.category">
			<view class="title-warp" >
				<view class="icon" style="background-image: url('https://mioumanage-1259471224.cos.ap-chengdu.myqcloud.com/sceninfo/20210204133050fvjxzeedgo.png');">
					
				</view>
			</view>
			<view class="flex alliance-box">
				<block v-for="(item,index) in alliance.allAD" :key="index">
					<view class="img-warp" 
						@click="$jumpPages('alliance', {type: item.name})"
					>
						<image class="img" :src="item.img" mode="widthFix"/>
					</view>
				</block>
			</view>
		</view>
		
		<!-- 本周剧本推荐 -->
		<view class="scenario-warp bg-whitete">
			<view class="title-warp">
				<image class="icon" src="/static/img/ic_index_scriprecommendtitle.png" mode="aspectFit"/>
				<view class="more" @click="$jumpPages('scenRank')">更多</view>
			</view>
			<scroll-view scroll-x="true" class="scenario-scroll"  v-if="scenarioList.length">
				<view class="scenario-list" >
					<block v-for="(scenario,index) in scenarioList" :key="index">
						<view class="scenario"  
							@click="jumpScenDetail(scenario)"
						>
							<view class="pimg">
								<image class="pimg_img" :src="scenario.scenimg"
									mode="aspectFill"
								></image>
							</view>
							<view class="scenname">{{scenario.scenname}}</view>
							<view class="score-warp" v-if="scenario.scenscore">
								<star-group :score="scenario.scenscore"></star-group>
							</view>
							<view class="score-warp" v-else>
								<text class="score">暂无评论</text>
							</view>
							
						</view>
					</block>
					<view class="scenario empty"> </view>
				</view>
			</scroll-view>
		</view>
		
		
		<!-- 达人推荐 -->
		<view class="miou-expert margin" v-if="expertList.length">
			<view class="miou-expert-title">
				<image class="icon" src="/static/img/ic_index_talentrecommendtitle.png" mode="aspectFit"/>
			</view>
			<view class="miou-expert-list">
				<block v-for="(expert,index) in expertList" :key="index">
				<view class="expert-warp" @click="$jumpPages('playinfo', {othername: expert.username})">
					<image class="avatar" v-if="expert.headurl" 
						:src="expert.headurl" mode="aspectFill"></image>
					<image class="avatar" v-else src="/static/img/avater.png"></image>
					<view class="nickname text-cut">{{expert.nickname}} </view>
					<view class="handle">关注</view>
				</view>
				</block>
			</view>
		</view>

	
		<!--广告轮播图-->
		<view class="margin" v-if="advertList.length">
			<swiper
				class="screen-swiper square-dot c"
				autoplay
				indicator-dots
			>
				<swiper-item
					v-for="(item, index) in advertList"
					:key="index"
					@click="bannerTap(item)"
				>
					<image class="swiper-img" :src="item.thumbnail" mode="widthFix"></image>
				</swiper-item>
			</swiper>
		</view>
		
		<!-- 行业资讯 -->
		<view class="miou-information">
			<view class="title-warp">
				<image class="icon" src="/static/img/ic_index_tradenewstitle.png" mode="aspectFit"/>
				<view class="more" @click="$jumpPages('information')">更多</view>
			</view>
			<view class="miou-information-list" v-if="articleList.length">
				<block v-for="(article, index) in articleList" :key="index">
					<viewMessage :article="article"></viewMessage>
				</block>
				<uni-load-more :status="loadingType"></uni-load-more>
			</view>
		</view>
		
		
		

		
		<view class="cu-tabbar-height"></view>
	
	</view>
</template>

<script>
import uniLoadMore from '@/components/basics/uni-load-more/uni-load-more.vue';
import starGroup from '@/components/basics/star-group.vue';
import viewMessage from '@/components/box/ViewMessage.vue';
import viewTab from './viewTab.vue';
import viewGame from './viewGame.vue';
import appMixin from './appMixin';
import { Banner } from '@/models/banner.js';
import { Scen } from '@/models/scen.js';
import { Expert } from '@/models/expert.js';
import { Article } from '@/models/article.js';
import { Game } from '@/models/game.js';
import { Alliance } from '@/models/alliance.js';

import { mapState } from 'vuex';

//======================================================================

export default {
	name: 'ViewHome',
	mixins: [appMixin],
	components: {
		uniLoadMore,
		viewMessage,
		starGroup,
		viewTab,
		viewGame
	},
	data() {
		return {
			pagenum: 1,
			loadingType: 'more',
            swiperList: [],
			advertList: [],
			scenarioList: [],
			expertList: [],
			mineGameList: [],
			articleList: [],
			alliance: []
		}
	},
	computed: {
		...mapState({
			"hasLogin": state => !!state.token.username
		}),
	},
	watch: {
		hasLogin(val) {
			if(val) {
				this.getGameList()
			}
		},
	},
	methods: {
		pageChange(page) {
			if(page == 'home') {
				console.log('home');
				this.getGameList()
			}
		},
		refresh(){
			if(this.indexPage=='home') {
				console.log('home');
				this.setOnShow()
			}
			
		},
		setOnShow() {
			this.getAlliance()
			this.getGameList()
			this.getBannerList()
			this.getCommend()
			this.getArticleList(1)
		},
		async getGameList() {
			if(!this.hasLogin) return
			let mineGameList = await Game.getMineGame(1)
			this.mineGameList = mineGameList
			Expert.getExpertCommend(1).then(expertList => {
				this.expertList = expertList
			})
		},
		async getAlliance() {
			let alliance = new Alliance()
			await alliance.getAllSKU()
			this.alliance = alliance
		},
		async getBannerList() {
			let swiperList = await Banner.getHomeBanner()
			this.swiperList = swiperList
		},
		async getCommend() {
			Scen.getWeekCommend(1).then(scenarioList => {
				this.scenarioList = scenarioList
			})
		},
		
		async getArticleList(pagenum) {
			this.loadingType = 'loading'
			let articleList =  await Article.getArticleCommend(pagenum)
			this.articleList = this.articleList.concat(articleList)
			if (!articleList.length) {
				this.loadingType = 'noMore'
				return
			}
			this.loadingType = 'more'
		},
		setReachBottom() {
			if(this.indexPage == 'home') {
				if(this.loadingType == 'loading' || this.loadingType == 'noMore'){
				    return
				}
				this.pagenum = this.pagenum + 1
				this.getArticleList(this.pagenum)
			}
			
			
		},
		searchTap() {
			this.$jumpPages('search')
		},
		
		jumpScenDetail(scenInfo) {
			this.$jumpPages('scenario', {
				scenid: scenInfo.scenid
			})
		},
		onGoToBanner(banner) {
		    let type = Banner.gotoTarget(banner)
		    if (type == 'web' && banner.httpurl) {
		    	this.$jumpPages('web',{
		    		url: encodeURIComponent(banner.httpurl)
		    	});
		    }
		},
		adImgTap() {
		    this.modalName = null;
		    console.log('图片被点击');
		},
	}
}
</script>


<style lang="scss" scoped>
.miou-home-box{
	background: #fff;
}

.title-warp {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20rpx 30rpx;

	.icon {
		height: 32rpx;
		width: 194rpx;
	}

	.more {
		font-size: 14px;
		color: #909090;
		font-weight: 400;
	}
}
.scenario-scroll{
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.scenario-list {
	padding: 20rpx 10rpx;
	display: flex;
	white-space: nowrap;
	.scenario {
		padding-bottom: 10rpx;
		margin-left: 20rpx;
		border-radius: 10rpx;
		position: relative;
		line-height: 1.6;
		position: relative;
		overflow: hidden;
		flex-shrink: 0;
		text-align: center;
		.pimg {
			display: block;
			width: 168rpx;
			height: 234rpx;
			background-color: #EAEAEA;
		}
		.pimg_img{
			width: 168rpx;
			height: 234rpx;
			border-radius: 10rpx;
		}
		.scenname{
			text-align: left;
			width: 168rpx;
			font-size: 11px;
			line-height: 1;
			font-weight: 400;
			padding: 20rpx 0 12rpx;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;  
		}
	}
	.empty{
		min-width: 10rpx;
	}
}

.miou-expert{
	background-color: #F8FAFF;
	border-radius: 20rpx;
	.miou-expert-title{
		padding:  40rpx 30rpx 0;
		.icon{
			height: 32rpx;
			width: 125rpx;
		}
	}
	.miou-expert-list{
		display: flex;
		white-space: nowrap;
	}
	.expert-warp{
		padding: 28rpx;
		text-align: center;
		.avatar{
			height: 80rpx;
			width: 80rpx;
			border-radius: 50%;
			margin-bottom: 10rpx;
		}
		.nickname{
			min-height: 24rpx;
			max-width: 80rpx;
			font-size: 24rpx;
			color: #505050;
			line-height: 1;
			margin-bottom: 10rpx;
		}
		.handle{
			background-color: #2EB9C3;
			border-radius: 30rpx;
			color: #FFFFFF;
			width: 70rpx;
			height: 30rpx;
			font-size: 22rpx;
			line-height: 30rpx;
			display: inline-block;
		}
	}
}
.screen-swiper {
	height: 161rpx;
	min-height: 161rpx;
	.swiper-img{
		width: 100%;
		height: 100%;
		border-radius: 20rpx;
	}
}
.miou-swiper-box {
    width: 690rpx;
	margin: 10rpx auto 0;
    .screen-swiper {
        height: 280rpx;
        min-height: 280rpx;
    }
}

.miou-information{
	.title-warp {
		.icon {
			width: 108rpx;
		}
	}
}
.alliance{
	.title-warp {
		.icon {
			background-position: left center; 
			background-size: contain; 
			background-repeat: no-repeat;
			width: 100%;
			height: 34rpx;
		}
	}
	.flex{
		justify-content: space-between;
	}
	.alliance-box{
		padding: 10rpx 30rpx;
	}
	.img{
		width: 330rpx;
	}
}
.miou-view-content {
    width: 100%;
	padding-top: calc(var(--status-bar-height) + 101rpx);
	.home-view{
		position: relative;
		width: 100%;
	}
	.miou-view-ad{
		padding-bottom: 0;
	}
	.miou-ad-img {
		position: relative;
	    width: 100%;
	}
	.miou-view-list{
		position: relative;
		background-color: $page-color-base;
		width: 100%;
		border-radius:  40upx 40upx 0 0;
		padding-top: 30rpx;
	}
}



		
		
</style>
